<template>
    <view style="position: relative">
        <image class="mh_bj" :src="userData.avatarLink"></image>
        <view class="mc"></view>
        <view class="content_box p_20 c_f p_t_50">
            <view class="dis_f_sb">
                <s-header :headerData="userData" :isFollow="true" @refresh="getInfo"></s-header>
            </view>
            <view class="m_t_10 c_f f_s_14" v-if="userData.gameId">
                入驻游戏:{{userData.gameId || ''}}
            </view>
            <view class="m_t_10 c_f f_s_14" v-if="userData.gameArea">
                游戏区服:{{userData.gameArea==1?'端游':'手游'}}
            </view>
            <view class="m_t_10 c_f f_s_14" v-if="userData.gameName">
                游戏马甲:{{userData.gameName || ''}}
            </view>
            <view class="m_t_10 c_f f_s_14" v-if="userData.dsVipName">
                等级:{{userData.dsVipName || ''}}
            </view>
            <view class="m_t_10 c_f f_s_14" v-if="userData.info">
                简介:{{userData.info || ''}}
            </view>
        </view>
        <view class="m_t_20 m_b_20">
            <u-tabs :list="tabList"
                    lineColor="#3388FF"
                    :activeStyle="{
                        color: '#000',
                    }"
                    :inactiveStyle="{
                        color: '#000',
                        transform: 'scale(1)'
                    }"
                    itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"  @click="handleTabChange"></u-tabs>
        </view>
        <view class="content m_t_30 p_10" >
            <view v-if="activeIndex==0">
            <s-goods-list :goodsList="userData.goodsList" :waiterId="userData.userId" :showCart="false" :showReservation="true"></s-goods-list>
            </view>
            <view v-else>
                <!-- 回复列表 -->
                <view class="item" style="margin-bottom: 10rpx;" v-if="userData.postList.length > 0">
<!--                    <view class="top">-->
<!--                        <view style="font-size: 30rpx;margin-bottom: 20rpx;">评价</view>-->
<!--                        <view style="font-size: 26rpx;color: #999;margin-bottom: 20rpx;" @click="goComment">查看全部 > </view>-->
<!--                    </view>-->
                    <view class="info-item" v-for="(item, index) in userData.postList" :key="index">
                        <!-- 顶部头像 -->
                        <view class="dis_f_sb_c" style="flex: 1;">
                            <view class="info-item-top">
<!--                                <u-avatar :src="item.avatarUrl" v-if="item.avatarUrl"></u-avatar>-->
                                <u-avatar :src="item.userVo.avatar"></u-avatar>
                                <view class="nickname-box">
                                    <view style="margin-right: 10rpx;">{{ item.userName|| item.userVo.nickName }}</view>
                                    <!-- <view class="createTimeStr"> {{item.createTimeStr}} </view> -->
                                </view>
                            </view>
                        </view>
                        <!-- 发布的内容 -->
                        <view class="pl_content">
                            <view class="title">
                                <u-rate readonly :count="5" v-model="item.level" activeColor="#F56C6C"></u-rate>
                                <view class="level" v-if="item.level == 1">非常差</view>
                                <view class="level" v-if="item.level == 2">差</view>
                                <view class="level" v-if="item.level == 3">一般</view>
                                <view class="level" v-if="item.level == 4">满意</view>
                                <view class="level" v-if="item.level == 5">非常满意</view>
                            </view>
                            <view class="content-text"> {{item.title}} </view>
                            <!-- 图片 -->
                            <view class="img" v-if="item.imgUrl">
                                <view v-for="(url, index) in item.imgUrl.split(',').slice(0, 5)" :key="index" style="margin-right: 10rpx;position: relative;">
                                    <image :src="url" style="height: 120rpx;width:120rpx;border-radius: 10rpx;" @click="handlePostImg(url, item.imgUrl.split(','))"></image>
                                    <view class="more" v-if="item.imgUrl.split(',').length > 5 && index == 4" @click="handlePostImg(url, item.imgUrl.split(','))">
                                        +{{ item.imgUrl.split(",").length - 5 }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view style="margin: 20rpx 10rpx;">
                            <u-line v-if="userData.postList.length -1 != index"></u-line>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import {addCollectionUserApi, getGoodsListApi, getPostListApi, getUserInfoApi} from "@/sheep/api/index";
import {xcxTopUp} from "@/sheep/utils/wxUtil";
import {mapGetters} from "vuex";
export default {
    name: "info",
    data(){
        return{
            userId:'',
            userData:{},
            avatarList:[],
            tabList:[
                {
                    name:'服务'
                },     {
                    name:'评价'
                },
            ],
            activeIndex:0
        }
    },
    onLoad(params) {

        this.userId = params.userId;
        this.getInfo()
    },
    computed: {
        ...mapGetters(["phoneIsPay","phonePayMoney"]),
    },
    methods:{
        getInfo(){
            getUserInfoApi({userId:this.userId}).then((res) => {
                this.userData = res.data;
                if (res.data.photosLink){
                    this.avatarList = res.data.photosLink.split(",");
                }
            });
        },

        handleShowImg(index){
            //图片预览
            uni.previewImage({
                urls: this.avatarList,
                current:index
            });
        },
        handleTabChange(e){
            console.log("e", e);
            this.activeIndex = e.index;
        },
        goComment() {
            uni.navigateTo({
                url: "/pages/goods/comment?goodsId=" + this.goodsId,
            });
        },
        handlePostImg(url, urlList) {
            uni.previewImage({
                current: url,
                urls: urlList,
            });
        },
    }
}
</script>

<style scoped lang="scss">
.mh_bj{
    position: absolute;
    width: 100%;
    height: 800rpx;
    //filter: blur(8px);
    z-index:-2
}
.mc{
    position: absolute;
    width: 100%;
    height: 800rpx;
    background: #000;
    opacity: 0.5;
    z-index:-1
}
/*.content_box::before{
    width: 100%;
    height: 800rpx;
    background-image: url("https://wx3.sinaimg.cn/mw690/9ef8454dgy1hyncn3qyshj20u0140n0g.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    //只是背景图片模糊
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(5px);
    z-index: -1;
}*/
.content{
    width: 100%;
    //计算高度
    min-height: calc(100vh - 400rpx);
    background: #f1f1f3;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}
.item {
    margin-bottom: 20rpx;
    padding: 30rpx 40rpx;
    background-color: #fff;
    // border-radius: 20rpx;
    .name {
        display: flex;
        justify-content: space-between;
    }
    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
.info-item {
    .info-item-top {
        display: flex;
        align-items: center;
        .nickname-box {
            margin-left: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
            .nickname {
                font-size: 30rpx;
                margin-right: 10rpx;
                font-weight: 600;
            }
        }
    }
    .content {
        .content-text {
            margin-top: 10rpx;
            margin-left: 5rpx;
            font-size: 30rpx;
            //字间距
            // letter-spacing: 1rpx;
            margin-bottom: 10rpx;
        }
        .bottom {
            display: flex;
        }
    }
}
.pl_content {
    .content-text {
        margin-top: 10rpx;
        margin-left: 5rpx;
        font-size: 30rpx;
        //字间距
        // letter-spacing: 1rpx;
        margin-bottom: 10rpx;
    }
    .bottom {
        display: flex;
    }
}
</style>
